<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../js/bootstrap-table.js"></script>
</head>
<body>
<button onclick="getAll()">获取全部数据</button>
<table class="table" id="table"></table>
</body>
<script>

    var data = [
        {
            id: 1,
            age: 11,
            name: "111"
        },
        {
            id: 2,
            age: 22,
            name: "222"
        },
        {
            id: 3,
            age: 33,
            name: "333"
        }
    ];

    $(() => {
        initTable();
    });



    function initTable() {
        $('#table').bootstrapTable({
            data: data,
            classes: 'table table-hover',

            striped: true,                      //是否显示行间隔色

            search: false,                      //是否显示表格搜索
            strictSearch: false,
            showColumns: false,                  //是否显示所有的列（选择显示的列）
            clickToSelect: true,                //是否启用点击选中行
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            cache: false,
            columns: [
                {
                    field: 'id',
                    title: 'id值',
                },
                {
                    field: 'age',
                    title: 'age值',
                },
                {
                    field: 'name',
                    title: 'name值'
                },
                {
                    field: '',
                    title: '操作',
                    width: '40%',
                    //控制title显示居中
                    titleAlign: 'center',
                    isResize: true,
                    formatter: operateFormatter,
                    events: operateEvents1
                }
            ],
            onLoadSuccess: function () {
            }
        });
    }

    function operateFormatter(value, row, index) {
        return [
            '<div class="btn-group">',
            '<button id="btnEditPicGroupDetail" type="button" class="btn btn-default"  singleSelected=true>修改</button>',
            '<button id="delete" type="button" class="btn btn-default"  singleSelected=true>删除</button>',
            '</div>'
        ].join('');
    }

    window.operateEvents1 = {
        /**
         * 功能:
         *      通过按钮的id添加事件函数.
         * 说明:
         *      1. row代表本行的值, index表示当前页的第几条数据
         */
        "click #btnEditPicGroupDetail": function (e, value, row, index) {
            console.log(row.id, index);
        },
        "click #delete": function (e, value, row, index) {
            data.splice(index, 1);
            $('#table').bootstrapTable('destroy');
            initTable();
        }
    };

    function getAll() {
        var rows = $('#table').bootstrapTable('getData');
        console.log(rows);
    }


</script>
</html>